<template>
  <a-card :bordered="false">
    <h3 class="title">新增面料</h3>
    <div>
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="8" :sm="12">
            <a-form-item :required="true" label="面料编号">
              <a-input style="width: 150px" placeholder="请输入面料编号" v-model="fabricCode"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item :required="true" label="供应商面料编号">
              <a-input style="width: 165px" placeholder="请输入供应商面料编号" v-model="gysfabriccode"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item :required="true" label="供应商">
              <a-select
                @focus="focus"
                ref="select"
                style="width: 150px"
                @change="handleChange"
                v-model:value="gysid"
                placeholder="请选择供应商"
              >
                <a-select-option :label="item.realname" :value="item.id" v-for="(item,key) in gyslist" :key="item.id">
                  {{ item.realname }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

      </a-form>

      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="8" :sm="12">
            <a-form-item :required="true" label="面料类型">
              <a-select
                style="width: 186.76px"
                placeholder="请选择面料类型"
                v-model="fabrictypeid"
              >
                <a-select-option :label="item.fabricTypeName" :value="item.id" v-for="(item,key) in fabricTypeList"
                                 :key="item.id">
                  {{ item.fabricTypeName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item :required="true" label="是否进口">
              <a-radio-group name="radioGroup" v-model="isjinkou">
                <a-radio value="0">
                  国产
                </a-radio>
                <a-radio value="1">
                  进口
                </a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item label="面料排序">
              <a-input-number style="width: 183px" placeholder="排序" v-model="paixu"></a-input-number>
            </a-form-item>
          </a-col>
        </a-row>

      </a-form>

      <!--第三行-->
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="8" :sm="12">
            <a-form-item label="面料产地">
              <a-input placeholder="请输入面料产地" v-model="fabricSource"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item label="面料品牌">
              <a-input placeholder="请输入面料品牌" v-model="pinpai"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item label="面料成分">
              <a-input placeholder="请输入面料成分" v-model="fabricContent"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!--    <h3>面料材质</h3>-->
    <div>

      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="8" :sm="12">
            <a-form-item label="面料纱织">
              <a-input placeholder="请输入面料纱织" v-model="fabricShazhi"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item label="面料克重">
              <a-input min="0" placeholder="请输入面料克重" v-model="fabricWeight"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item label="面料门幅">
              <a-input placeholder="请输入面料门幅" v-model="menfu"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <a-form layout="inline">

        <a-row :gutter="24">
          <a-col :md="8" :sm="12">
            <a-form-item label="面料颜色">
              <a-input placeholder="请输入面料颜色" v-model="fabriceColor"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item label="面料花型">
              <a-input placeholder="请输入面料花型" v-model="huaxing"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item label="面料季节">
              <a-input placeholder="请输入面料季节" v-model="season"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!--<h3>其他</h3>-->
    <a-form layout="inline">
      <a-form-item label="缩略图">
        <j-image-upload class="avatar-uploader" text="上传" v-model="fileList" style="margin-top: 8px;"></j-image-upload>
      </a-form-item>
    </a-form>

    <a-form layout="inline">
      <a-row :gutter="24">
        <!--        <a-col :md="7" :sm="12">
                  <a-form-item label="面料名称">
                    <a-input v-model="fabricName"></a-input>
                  </a-form-item>
                </a-col>-->
        <a-col :md="8" :sm="12">
          <a-form-item label="库存(米)">
            <a-input-number placeholder="请输入库存" min="0.1" suffix="米" v-model="inventory"></a-input-number>
          </a-form-item>
        </a-col>
      </a-row>

    </a-form>
    <a-row :gutter="24">
      <a-col :md="8" :sm="12">
        <a-form-item label="备注">
          <a-input placeholder="请输入备注" type="textarea" :auto-size="{ minRows: 3, maxRows: 10 }"
                   v-model="remark"></a-input>
        </a-form-item>
      </a-col>
    </a-row>

    <a-button type="primary" @click="addFabric">提交</a-button>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import upload from 'element-ui'
import {getAction} from "../../api/manage";
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import JImageUpload from '../../components/jeecg/JImageUpload'

export default {
  name: "AddFabric",
  components: {
    JImageUpload
  },
  created() {
    this.getgys()
    this.getFabricType()
  },
  data() {
    return {
      rules: {
        test: [
          {required: true}
        ]
      },
      upload,
      locale,
      menfu: '',
      season: '',
      gysfabriccode: '', // 供应商面料编号
      fabrictypeid: undefined, // 面料类型ID
      fabriceColor: '', // 面料颜色
      dialogVisible: false,
      paixu: '', // 排序字段
      fabricTypeList: [], // 面料类型列表
      dialogImageUrl: '',//上传的图片路径
      fabricCode: '',// 面料编号
      fabricSource: '',// 产地
      pinpai: '',// 品牌
      gysid: undefined, // 供应商ID
      isjinkou: '', // 是否进口
      fabricContent: '',// 面料成分
      fabricShazhi: '',//纱织
      fabricWeight: '',// 重量
      fabricWidth: '',// 宽
      remark: '',// 备注
      fabricName: '',// 面料名称
      inventory: '',// 库存
      gyslist: [], // 查询到的供应商列表
      color: '', // 面料颜色
      huaxing: '',
      url: {
        fabricType: '/fabric/getFabricTypeList', // 面料类型列表
        gysList: '/fabricCenter/selectGYS', // 供应商列表
        addFabric: '/fabricCenter/addFabric' // 添加面料
      },
      value: '0',
      previewVisible: false,
      previewImage: '',
      fileList: [],
    }
  },
  methods: {
    /**
     * 获取面料类型
     */
    getFabricType() {
      getAction(this.url.fabricType).then(res => {
        if (res.code == '0') {
          this.fabricTypeList = res.data
        }
      })
    },

    /**
     * 新增面料
     */
    addFabric() {
      var i = this.checkData()
      if (i == 1) {
        return
      } else {
        getAction(this.url.addFabric, {
          'groupId': this.$route.query.group,
          'fabricCode': this.fabricCode,
          'fabricSource': this.fabricSource,
          'pingpai': this.pinpai,
          'sysuserId': this.gysid,
          'isimport': this.isjinkou,
          'fabricContent': this.fabricContent,
          'fabricShazhi': this.fabricShazhi,
          'fabricWeight': this.fabricWeight,
          'fabricImg': this.fileList,
          'fabricName': this.fabricName,
          'inventory': this.inventory,
          'remark': this.remark,
          'fabriceColor': this.fabriceColor,
          'fabricTypeId': this.fabrictypeid,
          'hua': this.huaxing,
          'season': this.season,
          'menfu': this.menfu,
          'paixu': this.paixu,
          'gysfabriccode': this.gysfabriccode
        }).then(res => {
          if (res.code == '200') {
            this.$message.success("添加成功")
            this.cleanData()
            // this.$router.go(-1)
          } else {
            this.$message.error(res.message)
          }
        })
      }
    },
    getgys() { // 获取供应商列表
      getAction(this.url.gysList).then(res => {
        this.gyslist = res.result
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    //上传图片成功函数
    handleSuccess(response, file, fileList) {
      var result = response;
      this.dialogImageUrl = result.data;
    },
    handleExceed(files, fileList) {
      // this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      this.$message.warning("上传文件超出限制");
    },
    // 数据校验
    checkData() {
      if (this.fabricCode == '') {
        this.$message.warning("请填写面料编号")
        return 1
      }
      if (this.gysfabriccode == '') {
        this.$message.warning("请填写供应商写面料编号")
        return 1
      }
      if (this.gysid == '' || this.gysid == undefined) {
        this.$message.warning("请选择供应商")
        return 1
      }
      if (this.fabrictypeid == '' || this.fabrictypeid == undefined) {
        this.$message.warning("请选择面料类型")
        return 1
      }
      if (this.isjinkou == '' || this.isjinkou == undefined) {
        this.$message.warning("请选择是否进口")
        return 1
      }
    },
    /**
     * 清空页面数据
     */
    cleanData() {
      this.fabricCode = ''
      this.fabricSource = ''
      this.pinpai = ''
      this.gysid = ''
      this.isjinkou = ''
      this.fabricContent = ''
      this.fabricShazhi = ''
      this.fabricWeight = ''
      this.fileList = ''
      this.fabricName = ''
      this.inventory = ''
      this.remark = ''
      this.fabriceColor = ''
      this.fabrictypeid = ''
      this.huaxing = ''
      this.season = ''
      this.menfu = ''
      this.paixu = ''
      this.gysfabriccode = ''
    }
  }
}
</script>

